<template>
	<!-- 套餐弹窗- 业务复杂 -->
	 <uni-popup ref="popup" >
		<view class="product-continar"> 
		    <view class="title">
		    	{{producModal.groupTypeName}}选择
		    </view>
			<view style="max-height: calc(80vh - 140rpx);overflow-y: scroll;">  

			<!-- 共有3中套餐类型： operType 1固定套餐，只能选择套餐数量 0自由组合 choiceType 0按照数量选择 1按照种类选择 -->
			<view class="product-info-flex"> 
			    <view v-if="producModal.attachment">
					<image :src="producModal.attachment" mode="aspectFill"></image>
				</view>
				<view v-else>
					<image src="https://jtmc.oss-cn-hangzhou.aliyuncs.com/public/other/icon-default.png" mode="aspectFill"></image>
				</view> 
				<view class="conetent-right">
					<view class="info-text over-hidden-el">{{ producModal.goodsName }}</view>
					<view class="chxy-row-bt"> 
						<order-number-box :max="9999999" :min="1" v-model='producModal.qty' @change="valChange($event,producModal)"/>
					</view>
				</view>
			</view>
			
			<!-- 商品 -->
			<template v-for="(item, index) in producModal.priceList" :key="index">

				<!-- 冗余的商品结构 -->
				<view v-for="(subItem, subIndex) in item.detail" :key="subIndex">

					<!-- 可选种类的套餐 -->
					<view class="option-continar" v-if="subItem.operType === '0' && subItem.choiceType === '1'"> 
						<view class="opt-title"> 
							{{ subItem.groupName }} 
							<text class="lef-rig-kh">(</text>
							<text class="center-name">可选种类</text>
							<text class="center-num">{{subItem.maxQty}}选{{maxQTYPas(subItem)}}</text>
							<text class="lef-rig-kh">)</text>  
						</view> 
						<view class="option-item m-t-10" v-for="(vItem, vIndex) in subItem.goodsDetail" @click="toCheck(vItem,subItem)" :key="vIndex" :class="vItem.check? 'check-package' : 'check-package-no'">  
								
								<!-- 有口味 -->
								<view v-if="vItem.goodsFlavor" class="chxy-row-bt zl-bac">
									<view class="option-left">
										<view>{{ vItem.goodsName }}</view> 
									</view>
									<view class="option-right">
										x{{vItem.defaultQty || 0}} 
									</view>
								</view>  
								<view v-if="vItem.goodsFlavor" >  
									<view class="zl-gflavor-cen">
							            <view class="chxy-row-bt" >
											<view class="zl-item-che">
												已选：{{JsonPasMore(vItem)}} 
											</view>
											<view class="zl-item-gg" @click.stop="showFlagFun(vItem)">
												选规格
												<image v-show="vItem.showFlag" src="https://oss.jtmckj.com/public/icon/down.png" class="check-img"></image>
												<image v-show="!vItem.showFlag" src="https://oss.jtmckj.com/public/icon/down.png" class="check-img-no"></image> 
											</view>
										</view> 
										
									    <view class="h-20"></view>  
										
										<view v-show="vItem.showFlag">
										<view class="zl-line-ccc"> </view>
										<view class="h-20"></view>
										<view v-for="(gfItem, gfIndex) in vItem.goodsFlavor" :key="gfIndex">  
											<!-- 单选 -->
											<view v-if="gfItem.IsMultiple === '0'">
											    <view class="zl-sig-name">{{gfItem.Name}}</view>
												<view class="chxy-row-ac chxy-warp zl-sig-view">
													<view v-for="(minItem, minIndex) in gfItem.FlavorStr" :key="minIndex">
													    <view @click.stop="minSelect(minItem,gfItem)" :class="inClunsFun(minItem,gfItem.defCheck)? 'min-check':'min-no-check' " class="zl-sig-def">
														    {{minItem}}
														</view> 
													</view>
												</view> 
												<view class="h-20"></view>
											</view>
											<!-- 多选 -->
											<view v-if="gfItem.IsMultiple === '1'"> 
											    <view class="zl-more-name">{{gfItem.Name}}</view>
											    <view class="chxy-row-ac chxy-warp zl-more-view">
											    	<view v-for="(minItem, minIndex) in gfItem.FlavorStr" :key="minIndex">
											    	    <view @click.stop="minSelectMore(minItem,gfItem)" :class="inClunsFun(minItem,gfItem.defCheck)? 'min-check':'min-no-check' " class="zl-more-def" >
											    		    {{minItem}}
											    		</view> 
											    	</view>
											    </view> 
												<view class="h-20"></view>
											</view>
										</view>  
									    </view>
									</view>  
								</view>
								
								<!-- 没有口味 -->
								<view v-else class="chxy-row-bt three-no-zl" >
									<view class="option-left">
										<view>{{ vItem.goodsName }}</view> 
									</view>
									<view class="option-right">
										x{{vItem.defaultQty || 0}} 
									</view>
								</view> 
								
						</view>
					</view>
					
					<!-- 可选商品数量的套餐 -->
					<view class="option-continar" v-if="subItem.operType === '0' && subItem.choiceType === '0'" > 
						<view class="opt-title"> 
							{{ subItem.groupName }} 
							<text class="lef-rig-kh">(</text>
							<text class="center-name">可选数量</text>
							<text class="center-num">{{subItem.maxQty}}选{{maxQTYNum(subItem)}}</text>
							<text class="lef-rig-kh">)</text>
						</view> 
						<view class="option-item" v-for="(vItem, vIndex) in subItem.goodsDetail" :key="vIndex" style="margin-top: 10rpx;">  
						 
								<view v-if="vItem.goodsFlavor" class="sl-item-view">
									<view class="sl-con-view" :class="vItem.defaultQty > 0 ? 'pack-border-check':'pack-border-none'"> 
										<view class="chxy-row-bt h-30">
											<view>{{ vItem.goodsName }}</view> 
											<view><uni-number-box :max="vItem.maxQty" :min="0" v-model='vItem.defaultQty' @change="valChangeMaxFilter($event,subItem,vItem)"/></view> 
										</view> 
										<view class="h-40"></view> 
										<view class="chxy-row-bt sl-che-item"> 
											<view class="sl-che-flavors"> 
												已选：{{JsonPasSingnal(vItem.goodsFlavor)}}
											</view>
											<view class="chxy-row-ac h-30" @click="showFlagFun(vItem)"> 
												<view>选规格</view> 
												<image v-show="vItem.showFlag" src="https://oss.jtmckj.com/public/icon/down.png" class="check-img"></image>
												<image v-show="!vItem.showFlag" src="https://oss.jtmckj.com/public/icon/down.png" class="check-img-no"></image>
											</view>
										</view>
										
										<!-- 选规格的显示隐藏的开关  -->
										<view v-show="vItem.showFlag">
											<view class="h-20"></view>
											<view class="sl-che-line"></view> 
											<view class="h-24"></view>
											<view v-for="(gfItem, gfIndex) in vItem.goodsFlavor" :key="gfIndex">
												<!-- 单选 -->
												<view v-if="gfItem.IsMultiple === '0'">
												    <view class="sl-single-name">{{gfItem.Name}}</view>
													<view class="chxy-row-ac chxy-warp sl-single-view">
														<view v-for="(minItem, minIndex) in gfItem.FlavorStr" :key="minIndex">
														    <view @click.stop="minSelect(minItem,gfItem)" :class="inClunsFun(minItem,gfItem.defCheck)? 'min-check':'min-no-check' " class="sl-single-def">
															    {{minItem}}
															</view> 
														</view>
													</view> 
												</view>
												<!-- 多选 -->
												<view v-if="gfItem.IsMultiple === '1'">
												    <view class="sl-more-name">{{gfItem.Name}}</view>
												    <view class="chxy-row-ac chxy-warp sl-more-view">
												    	<view v-for="(minItem, minIndex) in gfItem.FlavorStr" :key="minIndex">
												    	    <view @click.stop="minSelectMore(minItem,gfItem)" :class="inClunsFun(minItem,gfItem.defCheck)? 'min-check':'min-no-check' " class="sl-more-def">
												    		    {{minItem}}
												    		</view> 
												    	</view>
												    </view> 
												</view>
											</view> 
										</view> 
										
									</view> 
								</view>  
								
								<!-- 没有口味 -->
								<view v-else  class="chxy-row-bt three-no-zl" :class="vItem.defaultQty > 0 ? 'pack-border-check':'pack-border-none'" >
									<view class="option-left">
										<view>{{ vItem.goodsName }}</view> 
									</view>
									<view class="option-right"> 
										<view><uni-number-box :max="vItem.maxQty" :min="0" v-model="vItem.defaultQty"  @change="valChangeMaxFilter($event,subItem,vItem)"/></view>
									</view>
								</view> 
								
						</view>
					</view>
					
					<!-- 固定的套餐 -->
					<view class="option-continar" v-if="subItem.operType === '1'"> 
						<view class="opt-title"> 
							{{ subItem.groupName }}
							<text class="lef-rig-kh">(</text>
							<text class="center-name">数量</text>
							<text class="center-num">{{subItem.maxQty}}</text>
							<text class="lef-rig-kh">)</text>
						</view> 
						<view class="option-item m-t-10" v-for="(vItem, vIndex) in subItem.goodsDetail" :key="vIndex">   
						
								<!-- 有口味 组件掉 -->
								<view v-if="vItem.goodsFlavor" class="gd-flavor-view">
									<view class="gd-flavor-def" :class="vItem.defaultQty > 0 ? 'pack-border-check':'pack-border-none'">
										
										<view class="chxy-row-bt h-30">
											<view>{{ vItem.goodsName }}</view>
											<view>x{{vItem.defaultQty}} </view>
										</view>
										
										<view class="h-24"></view>
										
										<view class="chxy-row-bt gd-che-view">
											<view class="gd-che-flavor"> 
												已选：{{JsonPasSingnal(vItem.goodsFlavor)}}
											</view> 
											<view class="chxy-row-ac h-30"  @click="showFlagFun(vItem)"> 
												<view>选规格</view>
												<image v-show="vItem.showFlag" src="https://oss.jtmckj.com/public/icon/down.png" class="check-img"></image>
												<image v-show="!vItem.showFlag" src="https://oss.jtmckj.com/public/icon/down.png" class="check-img-no"></image>
											</view>
										</view>
										
										<!-- 选规格的显示隐藏的开关 目前默认撑开 -->
										<view v-show="vItem.showFlag">
											<view class="h-20"></view>
											<view class="gd-fla-line"></view> 
											<view class="h-24"></view>
											<view v-for="(gfItem, gfIndex) in vItem.goodsFlavor" :key="gfIndex">
												<!-- 单选 -->
												<view v-if="gfItem.IsMultiple === '0'">
												    <view class="gd-sin-name">{{gfItem.Name}}</view>
													<view class="chxy-row-ac chxy-warp gd-sin-view">
														<view v-for="(minItem, minIndex) in gfItem.FlavorStr" :key="minIndex">
														    <view @click.stop="minSelect(minItem,gfItem)" :class="inClunsFun(minItem,gfItem.defCheck)? 'min-check':'min-no-check' " class="gd-sin-def">
															    {{minItem}}
															</view> 
														</view>
													</view> 
												</view>
												<!-- 多选 -->
												<view v-if="gfItem.IsMultiple === '1'">
												    <view class="gd-more-name" >{{gfItem.Name}}</view>
												    <view class="chxy-row-ac chxy-warp gd-more-view">
												    	<view v-for="(minItem, minIndex) in gfItem.FlavorStr" :key="minIndex">
												    	    <view class="gd-more-def" @click.stop="minSelectMore(minItem,gfItem)" :class="inClunsFun(minItem,gfItem.defCheck)? 'min-check':'min-no-check' ">
												    		    {{minItem}}
												    		</view> 
												    	</view>
												    </view> 
												</view>
											</view> 
										</view> 
										
									</view> 
								</view> 
								
								<!-- 没有口味 -->
								<view class="chxy-row-bt three-no-gf" v-else >
									<view class="option-left">
										<view>{{ vItem.goodsName }}</view> 
									</view>
									<view class="option-right">
										x{{vItem.defaultQty || 0}} 
									</view>
								</view> 
								
						</view>
					</view>
					
					<view class="h-20"></view>
					
				</view>
			</template>
            </view>
			<view class="footer-btn">
				<view class="chxy-row-bt">
					<view>
						<text></text>
						<text class="price-text">￥{{numMultiFun(producModal.salePrice , producModal.qty)}}</text> 
					</view>
					<view class="btn-sumbit" @tap="$u.throttle(handleAdd, 500)">
						加入
					</view>
				</view>
			</view>
		</view>  
	</uni-popup> 
</template>

<script setup>
	import { ref, defineProps, defineEmits,defineExpose  } from 'vue'; 
	import {  numMultiFun } from "@/until/tools.js"
	const props = defineProps({
		handleFlag: {
			type: Boolean, 
			default: true
		},
	}); 
	
	const producModal = ref({}) // 当前页面对象
	const lsModal = ref({}) // 上层页面对象   
	const popup = ref( )  // 弹窗
	
	const initDataProduct = ( getProducModal ) => {  
		popup.value.open('center')  
		producModal.value = JSON.parse(JSON.stringify(getProducModal)) 
		producModal.value.qty = 1 // 默认选中1  
		lsModal.value = getProducModal  
		console.log('producModal.value：',producModal.value)
		console.log('lsModal.value：',lsModal.value)    
	}
	
	
	// 处理套餐下 可选数量的最大值限制
	const valChangeMaxFilter = (val,maxItem) => {
		console.log('maxItem:',maxItem) 
		let nowMax = maxItem.maxQty
		let otherAll = 0 
		maxItem?.goodsDetail.forEach((item,index)=>{ 
			otherAll += item.defaultQty  
		}) 
		if(otherAll > nowMax){
			uni.showToast({
				title: '可选数量超出最大值~~',
				icon:'none'
			})  
			return
		}  
		maxItem?.goodsDetail.forEach((item,index)=>{ 
			maxItem.goodsDetail[index].maxQty = nowMax - otherAll + item.defaultQty
		})  
	}
	
	// 处理套餐下 可选数量的最大值限制（不建议此方式）
	const valCanNum = (maxItem,val) => {
		let nowAll = 99999
		let hadNum = 0
		maxItem?.goodsDetail.forEach((item,index)=>{
			hadNum = hadNum + item.defaultQty
		})
		console.log('maxItem:',maxItem)
		
		if(hadNum > maxItem.maxQty){
			
		}
		return Number(hadNum) - Number(maxItem.maxQty) 
	}
	
	// 套餐下的商品多选
    const toCheck = (minItem,maxItem) => {
		let total = 0 
		maxItem.goodsDetail.forEach((item)=>{
			if(item.check){
				total += 1
			} 
		}) 
		if(maxItem.maxQty <= total && !minItem.check){
			return
		}
		minItem.check = !minItem.check 
	}
	
	// 可选数量已选xx
	const maxQTYNum= (subItem) => {
		let defaultQty = 0
		subItem.goodsDetail.forEach((item)=>{
			if(item.defaultQty){
				defaultQty += item.defaultQty
			}  
		}) 
		return defaultQty // console.log('maxQTYNum：',subItem) 
	}
	
	// 计算套餐下的可选种类的数量
	const maxQTYPas= (subItem) => {
		let checkNum = 0
		subItem.goodsDetail.forEach((item,index)=>{
			if(item.check){
				checkNum += 1
			} 
		})
		return checkNum
	}
	
	// 处理格式更多数据
	const JsonPasMore = (valListMore) => { 
		let moreString = '' 
		valListMore?.goodsFlavor.forEach((item,index)=>{
			moreString = moreString + JsonPas(item.defCheck)  
		})  
		return moreString
	}
	
	// 格式处理  
	const JsonPas= (valList) => { 
		let resultString = ''
		console.log('valList：',valList)
		resultString = valList.join(',')
		return resultString
	}
	
	// 处理单品 已选口味回显
	const JsonPasSingnal= (valListMore) => { 
		let resultList = []
		valListMore.forEach((item,index)=>{   
			resultList= [...resultList,...item.defCheck]
		})    
		return resultList.join(',')
	} 
	 
	// 定义触发事件 'update:show',
	const emit = defineEmits(['handleAddToCart']);

	const selectTab = (tabItem, tabsIndex) => {
		tabItem.selectedIndex = tabsIndex;
		console.log('选中了 tab:', tabItem.gktypetile, '选项索引:', tabsIndex);
	}; 
	
	// 酒水分类
	const valChange =  async(qty, goodModal) => { 
		if (qty < 0) return   
		producModal.value.qty = qty  
	}
  
	// 判断固定套餐内部商品是否沽清
const checkEl = (arr)=>{
	console.log(arr,'cacxx')
  let elNum = 0
    arr.forEach(item=>{
      if(item.operType == '1'){
        if(item.detail){
          item.detail.forEach(v=>{
            if(v.isEstmClear == '1'){
              elNum ++
            }
          })
        }
      }
    })
    if(elNum > 0){
      return true
    }else{
      return false
    }
 
}
	// 点击加入按钮
	const handleAdd = () => {   
		if(!props.handleFlag){
			uni.showToast({ title: '请先扫描桌台二维码后再继续下单', icon: 'none' })
			popup.value.close() 
			return
		} 
		let toolList = producModal.value?.priceList
		console.log(producModal.value?.priceList[0],'csvddsvs-')
		let detailLength = producModal.value?.priceList[0]?.detail.length
		if(detailLength == 0) {
			uni.showToast({ title: '套餐内商品已被沽清', icon: 'none' })
			return
		} else {
			if(checkEl(toolList)){
					showToast("套餐内商品已被沽清");
					return;
       }
		}

		// 前端自行校验 套餐下商品多选的选项数量正确性 
		let resultFlag = false
		let showToastTitle = ''
		producModal.value?.priceList.some((item) => {
		    return item?.detail.some((subitem) => {
				// 可选种类
		        if (subitem.operType === '0' && subitem.choiceType === '1') {
		            let total = subitem?.goodsDetail.reduce((acc, vitem) => acc + (vitem.check ? 1 : 0), 0);
		            if (total !== subitem.maxQty) { 
						showToastTitle = subitem.groupName + '商品,可选种类不正确'
						resultFlag =  true
		                return true; 
		            }
		        }
				// 可选商品数量
				if (subitem.operType === '0' && subitem.choiceType === '0') {
				    let twoTotal = 0
					subitem?.goodsDetail.forEach((twoItem)=>{
						twoTotal += Number(twoItem.defaultQty)
					}) 
				    if (twoTotal > subitem.maxQty || twoTotal < subitem.maxQty) { 
						showToastTitle = subitem.groupName + '商品,可选数量不正确'
						resultFlag =  true
				        return true; 
				    }
				}   
				// 固定套餐  subitem.operType === '1' 
				if (producModal.value.qty <= 0) {
					console.log('subitem：',producModal.value)
					showToastTitle = '请选择套餐商品的正确数量'
					resultFlag =  true
					return true; // 返回true以跳出some循环
				} 
		        return false; // 继续循环
		    });
		});
		if(resultFlag){
			uni.showToast({
				title: showToastTitle, //外面 里面 所有的商品数量都要大于0
				icon:'none'
			})  
			return
		}
		// 不同套餐做处理 packageOthList存储所以选中的数据
		if(lsModal.value.packageOthList){ 
			let difFlag = true
			lsModal.value.packageOthList.forEach((item,index)=>{
				if( JSON.stringify(item.priceList) ===  JSON.stringify(producModal.value.priceList)){ 
					difFlag = false
					item.qty = Number(item.qty) + Number(producModal.value.qty)  
				}  
			}) 
			if(difFlag){ 
				lsModal.value.packageOthList.push(producModal.value)
			} 
			lsModal.value.qty = Number(lsModal.value.qty) + Number(producModal.value.qty)
		}else{
			lsModal.value.qty = Number(producModal.value.qty) 
			lsModal.value['packageOthList'] = []
			lsModal.value.packageOthList.push(producModal.value)
		} 
		// console.log('props.lsModal3',lsModal.value) 
		emit('handleAddToCart',lsModal.value); 
		popup.value.close() 
	}; 
	
	// minSelect 单选 gfItem.defCheck ,gfItem.FlavorStr
	const minSelect = (minitem,gfItem) => { 
		// console.log('minSelect：',minitem,gfItem.defCheck,gfItem.FlavorStr)
		gfItem.defCheck = [minitem]
	}
	
	// minSelectMore 多选 
	const minSelectMore = (minitem,gfItem) => { 
		// console.log('minSelect：',minitem,gfItem.defCheck,gfItem.FlavorStr)
		let flag = false
		gfItem.defCheck.forEach((item)=>{
			if(item === minitem){
				flag = true
			}
		})
		if(flag){
			gfItem.defCheck = gfItem.defCheck.filter(item => item !== minitem);
		}else{
			gfItem.defCheck.push(minitem)
		} 
	}
	
	// 判断是否包含
	const inClunsFun = (minitem,bigItem) => {  
		 // item.defCheck
		let flag = false
	    bigItem.forEach((item)=>{
			if(item === minitem){
				flag = true
			}
		})
		return flag
	} 
	
	const showFlagFun = (nowItem) => {  
		nowItem.showFlag = !nowItem.showFlag
	}
	
	
	defineExpose({
		 initDataProduct
	});
</script>

<style scoped lang="less"> 

	.product-continar {
		margin: 0 30rpx;
		padding: 34rpx; // 24  34
		width: calc(100vw - 128rpx);
		max-height: 80vh;   
		border-radius: 20rpx;
		background-color: #fff;

		.title {
			text-align: center;
			font-family: PingFang SC;
			font-weight: bold;
			font-size: 36rpx;
			color: var(--maincolorf1);
		}

		.product-info-flex {
			margin-top: 40rpx;
			display: flex;

			image {
				width: 160rpx;
				height: 160rpx;
				border-radius: 10rpx;
			}

			.conetent-right {
				margin-left: 16rpx;

				.info-text {
					padding: 24rpx 0 35rpx 0;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 32rpx;
					color: var(--maincolorf1);
					line-height: 40rpx;
					width: 400rpx;
				}
			}
		}
	}

	.option-continar {
		padding-top: 40rpx;

		.opt-title {
			color: var(--maincolorf1);
			font-size: 32rpx;
			margin-bottom: 20rpx;
			
			.lef-rig-kh{
				font-size: 26rpx;
				color: var(--maincolorf1); 
			}    
			.center-name{
				font-size: 26rpx;
				color: var(--maincolorf2); 
			} 
			.center-num{
				font-size: 26rpx;
				color: var(--maincolorf13); 
			} 
		}
	}

	.option-item { 
		width: 616rpx;
		border-radius: 8rpx;

		.option-pro-bwt {
			padding-bottom: 24rpx;
			display: flex;
			justify-content: space-between;
			border-bottom: 1rpx solid var(--maincolorbd);

			.option-left {
				view:nth-child(1) {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: var(--maincolorf1);
					margin-bottom: 30rpx;
				}

				view:nth-child(2) {
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf4);
				}
			}

			.option-right {
				.flex-gk {
					margin-top: 20rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 24rpx;
					color: var(--maincolorf2);
				}
			}
		}
	} 
	
	.footer-btn {
		margin-top: 20rpx;
		height: 80rpx; 
		bottom: 20rpx; 

		.price-text {
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 44rpx;
			color: var(--maincolorf1);
		}

		.btn-sumbit {
			width: 240rpx;
			height: 80rpx;
			background: var(--dt-backcolorPink);
			border-radius: 40rpx;
			text-align: center;
			line-height: 80rpx;
			color: var(--maincolor);
			font-family: PingFang SC;
			font-weight: 500;
			font-size: 36rpx;
		}
	}
	
	// 颜色未注入 
	 
	.check-package{ 
		border: 2rpx solid #FC97D1;
	}
	
	.check-package-no{ 
		border: 2rpx solid rgb(204, 204, 204);
	}
	
	.three-no-gf{
		height: 96rpx;
		background-color: #F7F7F7;
		padding: 0 24rpx;
		border-radius: 8rpx;
	}
	
	.three-no-zl{
		height: 96rpx; 
		padding: 0 24rpx;
		border-radius: 8rpx;
	}
	
	.zl-bac{
		height: 96rpx;
		background-color: #fff;
		padding: 0 24rpx;
		border-radius: 8rpx;
	}
	
	.zl-gflavor-cen{
		width: 574rpx;
		margin: 0 24rpx;
	}
	
	.zl-item-che{
		width: 460rpx;
		color: #999999;
		font-size: 24rpx;
	}
	
	.zl-item-gg{
		font-size: 24rpx;
		color: #999;
	}
	.zl-line-ccc{
		height: 1rpx;background-color:#ccc;
	}
	
	.zl-sig-name{
		height: 50rpx;line-height: 50rpx;
	}
	
	.zl-sig-view{
		width: 586rpx;margin-left: -16rpx;
	}
	.zl-sig-def{
		padding: 0 6rpx;min-width: 80rpx;margin-left: 16rpx;margin-bottom: 10rpx;border-radius: 8rpx;line-height: 40rpx;height: 40rpx;text-align: center;font-size: 24rpx;
	}
	
	.zl-more-name{
		height: 50rpx;line-height: 50rpx;
	}
	
	.zl-more-view{
		width: 586rpx;margin-left: -16rpx;
	}
	
	.zl-more-def{
		padding: 0 6rpx;min-width: 80rpx;margin-left: 16rpx;margin-bottom: 10rpx;border-radius: 8rpx;line-height: 40rpx;height: 40rpx;text-align: center;font-size: 24rpx;
	}
	
	.sl-item-view{
		background-color: #fff;width: 100%;height: 100%;
	}
	
	.sl-con-view{
		padding: 34rpx 24rpx;border-radius: 8rpx;
	}
	
	.sl-che-item{
		color: #999999;height: 30rpx;font-size: 24rpx;
	}
	
	.sl-che-flavors{
		width: 430rpx;color: #999999;
	}
	
	.sl-che-line{
		width: 100%;height: 1rpx;background: #E6E6E6;
	}
	
	.sl-single-name{
		height: 50rpx;line-height: 50rpx;
	}
	
	.sl-single-view{
		width: 586rpx;margin-left: -16rpx;
	}
	.sl-single-def{
		padding: 0 6rpx;min-width: 80rpx;margin-left: 16rpx;margin-bottom: 10rpx;border-radius: 8rpx;line-height: 40rpx;height: 40rpx;text-align: center;font-size: 24rpx;
	}
	.sl-more-name{
		height: 50rpx;line-height: 50rpx;
	}
	.sl-more-view{
		width: 586rpx;margin-left: -16rpx;
	}
	.sl-more-def{
		padding: 0 6rpx;min-width: 80rpx;margin-left: 16rpx;margin-bottom: 10rpx;border-radius: 8rpx;line-height: 40rpx;height: 40rpx;text-align: center;font-size: 24rpx;
	}
	.gd-flavor-view{
		background-color: #fff;width: 100%;height: 100%;
	}
	.gd-flavor-def{
		padding: 34rpx 24rpx;border-radius: 8rpx;
	}
	.gd-che-view{
		color: #999999;height: 30rpx;font-size: 24rpx;
	}
	.gd-che-flavor{
		color: #999999;width: 430rpx;
	}
	.gd-fla-line{
		width: 100%;height: 1rpx;background: #E6E6E6;
	}
	.gd-sin-name{
		height: 50rpx;line-height: 50rpx;
	}
	.gd-sin-view{
		width: 586rpx;margin-left: -16rpx;
	}
	.gd-sin-def{
	    padding: 0 6rpx;min-width: 80rpx;margin-left: 16rpx;margin-bottom: 10rpx;border-radius: 8rpx;line-height: 40rpx;height: 40rpx;text-align: center;font-size: 24rpx;
	}
	.gd-more-name{
		height: 50rpx;line-height: 50rpx;
	}
	.gd-more-view{
		width: 586rpx;margin-left: -16rpx;
	}
	.gd-more-def{
		padding: 0 6rpx;min-width: 80rpx;margin-left: 16rpx;margin-bottom: 10rpx;border-radius: 8rpx;line-height: 40rpx;height: 40rpx;text-align: center;font-size: 24rpx;
	}
	.pack-border-check{
		border: 2rpx solid #FE0190;
	}
	
	.pack-border-none{
		border: 2rpx solid #ccc;
	}
	
	.min-check{
		background-color: #FE0190;
		color: #fff;
	}
	
	.min-no-check{
		background-color: #E6E6E6;
		color: #212121;
	}
	
	.type-check{ 
		color: #FE0190 !important; 
	}
	
	.check-img{
		width: 22rpx;height: 12rpx;margin-left: 8rpx;
	}
	
	.check-img-no{
		width: 22rpx;height: 12rpx;margin-left: 8rpx;transform: rotate(180deg);
	}
	
	.option-item{
		::v-deep .uni-numbox {
				border: 1rpx solid #CCCCCC !important;
				border-radius: 8rpx;
			}
		
			::v-deep .uni-input-input {
				border-left: 1rpx solid #CCCCCC !important;
			}
		
			::v-deep .uni-numbox__plus {
				border-left: 1rpx solid #CCCCCC !important;
			}
	} 
</style>